<template>
  <div class="topic" :class="act ? 'act' : 'act-no'">
    <div>
      <el-tag class="biao">填空题</el-tag>
    </div>
    <div class="del" @click="remove" v-if="isremove">
      <i class="el-icon-delete"></i>
    </div>

    <div class="title">
      <h2 class="num">{{ idx + 1 }}</h2>
      <div class="fillTxt">{{ blankTitle }}</div>
      <!-- <br> -->
      <!-- <inputTi
        :isTitle="true"
        :idx="idx"
        :placeholder="'插入图片'"
        :fileList="question.titimgs"
        @changeImg="titimgChange"
      ></inputTi> -->
    </div>
    <div class="content" style="margin-top: 20px">
      <template v-for="(op, i) in blankTitleArr">
        <div
          v-if="op.type == 'txt'"
          :key="i"
          class="inputBlankBox"
          :style="`display: ${act ? 'flex' : 'block'}`"
        >
          <inputTxt :idx="i" :inputVal="op.value" @input="txtChange"></inputTxt>
          <i
            @click="close(i)"
            style="cursor: pointer"
            class="el-icon-close"
            v-if="act"
          ></i>
        </div>
        <div
          v-if="op.type == 'blank'"
          :key="i"
          class="inputBlankBox"
          :style="`display: ${act ? 'flex' : 'block'}`"
        >
          <inputBlank
            :idx="i"
            :blankAnswers="op.value"
            :blankDelimeter="blankDelimeter"
            :answerDelimeter="answerDelimeter"
            @input="blankChange"
          ></inputBlank>
          <i
            @click="close(i)"
            style="cursor: pointer"
            class="el-icon-close"
            v-if="act"
          ></i>
        </div>
      </template>
    </div>
    <div class="bonttom" v-if="act">
      <el-link type="primary" @click="addTxt">
        <i class="el-icon-plus"></i> 插入文本</el-link
      >
      <el-link type="primary" @click="addBlank">
        <i class="el-icon-plus"></i> 插入填空符</el-link
      >
    </div>
  </div>
</template>

<script>
import inputTi from "./inputTi";
import inputTxt from "./inputTxt";
import inputBlank from "./inputBlank";
import { isEmpty } from "@/utils/isEmpty";

const BLANK_DELIMETER = "＿";
const ANSWER_DELIMETER = "$";

export default {
  components: {
    inputTi,
    inputTxt,
    inputBlank,
  },

  props: {
    item: {
      type: Object,
      default: () => {},
    },
    act: {
      type: Boolean,
    },
    idx: {
      type: Number,
    },
    isremove: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      blankDelimeter: "＿",
      answerDelimeter: "$",
      question: this.item,
      blankTitle: "",
      blankTitleArr: [],
      txtItem: {
        type: "txt",
        value: "描述文字",
      },
      blankItem: {
        type: "blank",
        value: this.blankDelimeter,
      },
    };
  },
  computed: {},
  watch: {
    item() {
      this.question = this.item;
      this.initData();
    },
    act(val) {},
    idx() {},
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    initData() {
      // console.log('ssssss')
      this.blankTitleArr = [];
      var _title = this.question.title ? this.question.title : "";

      var _options =
        this.question.options && this.question.options.length > 0
          ? this.question.options
          : [];

      var _flag = _title.indexOf(this.blankDelimeter); // 当前填空符位置
      while (_flag != -1) {
        if (_flag > 0) {
          // 填空符前的内容
          var _txt = Object.assign({}, this.txtItem, {
            value: _title.substring(0, _flag),
          });
          this.blankTitleArr.push(_txt);
        }
        // 填空符内容
        var _blank = Object.assign({}, this.blankItem, {
          value: _options[0],
        });
        this.blankTitleArr.push(_blank);
        // 移除填空符内容
        _options.splice(0, 1);
        // 保留填空符后的内容
        _title = _title.substring(_flag + 1, _title.length);
        // 下一个填空符
        _flag = _title.indexOf(this.blankDelimeter);
      }
      if (!isEmpty(_title)) {
        var _txt = Object.assign({}, this.txtItem, {
          value: _title,
        });
        this.blankTitleArr.push(_txt);
      }
      this.setBlankTitle();

      if (this.blankTitleArr.length == 0) {
        this.addTxt();
        this.addBlank();
        this.addTxt();
      }
    },
    setBlankTitle() {
      var _blankTitle = this.blankTitleArr.map((v) => {
        console.log("_blankTitle", this.blankTitleArr);
        if (v.type == "blank") {
          return (
            "[" +
            (v.value ? v.value.replaceAll(this.answerDelimeter, ",") : "") +
            "]"
          );
        } else {
          return v.value;
        }
      });
      this.blankTitle = _blankTitle.join("");
    },
    //题目 变更
    titimgChange(fileList) {
      this.question.titimgs = fileList;
      this.upParentQuestion();
    },
    //文本 变更
    txtChange(i, v) {
      this.blankTitleArr[i].value = v;
      this.setBlankTitle();
      this.upParentQuestion();
    },
    //填空格 变更
    blankChange(i, blank) {
      this.blankTitleArr[i].value = blank.join(this.answerDelimeter);
      this.setBlankTitle();
      this.upParentQuestion();
    },
    // 变更父组件对象
    upParentQuestion() {
      var _txtArr = [];
      var _blankArr = [];
      this.blankTitleArr.forEach((el, idx) => {
        if (el.type == "txt") {
          _txtArr.push(el.value);
        }
        if (el.type == "blank") {
          _blankArr.push(el.value == this.blankDelimeter ? "" : el.value);
          _txtArr.push(this.blankDelimeter);
        }
      });
      this.question.title = _txtArr.join("");
      this.question.options = _blankArr;
      this.$emit("change", this.idx, this.question);
      this.$forceUpdate();
    },
    // 添加选项
    addTxt() {
      this.blankTitleArr.push({ ...this.txtItem });
      this.setBlankTitle();
      this.upParentQuestion();
    },
    // 添加填空格
    addBlank() {
      this.blankTitleArr.push({ ...this.blankItem });
      this.setBlankTitle();
      this.upParentQuestion();
    },
    // 删除
    close(index) {
      this.blankTitleArr.splice(index, 1);
      this.setBlankTitle();
      this.upParentQuestion();
    },
    // 移除试题
    remove() {
      this.$emit("remove", this.idx);
    },
  },
};
</script>

<style lang="scss" scoped>
.fillTxt {
  display: block;
  margin-left: 10px;
  font-size: 17px;
  width: 1000px;
  white-space: normal;
  /* 允许换行 */
  overflow-wrap: break-word;
  /* 在必要时单词内部断行 */
  line-height: 20px;
  letter-spacing: 3px;
}

.title {
  h2 {
    width: 50px;
    line-height: 30px;
    text-align: center;
  }

  width: 437px;
  // width: 70%;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  // flex-wrap: wrap;
}

.biao {
  position: absolute;
  top: 20px;
  right: 120px;
}

.inputBlankBox {
  display: flex;
  justify-content: space-between;
  align-items: center;

  i {
    flex: 1;
    margin-left: 40px;
    font-size: 15px;
  }
}

.act-no {
  border: 1px solid #f0f0f0 !important;
}

.act {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2) !important;
  // padding: 20px 0 17px;
  border-left: 3px solid #3089dc !important;
}

.topic {
  // height: 200px;
  position: relative;
  transition: 0.1s all;
  padding: 20px;

  .del {
    position: absolute;
    top: 30px;
    right: 40px;
    display: none;
    font-size: 20px;
    cursor: pointer;
  }
}

.topic:hover {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.08);

  .del {
    display: block;
  }
}

.content {
  width: 82%;

  // margin-top: 20px;
  margin-left: 40px;

  .contentItem {
    margin-top: 20px;
    width: 100%;
    display: flex;

    // justify-content: space-between;
    align-items: center;
    // .input{
    //   width: 90%;

    // }
    .box {
      width: 520px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    i {
      // margin-left: 30px;
      // float: right;
      font-size: 18px;
      display: inline-block;
      color: #666;
      // float: right;
    }
  }
}

.input {
  width: 427px;
}

.bonttom {
  height: 40px;
  margin-top: 10px;
  margin-left: 40px;
  width: 35%;
  display: flex;
  justify-content: space-between;
}
</style>
